<template>
	<div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
		<PageLayout />
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import PageLayout from '@/layouts/page/index.vue';
import { useDesign } from '@/hooks/web/useDesign';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
import { useContentViewHeight } from './useContentViewHeight';

export default defineComponent({
	name: 'LayoutContent',
	components: { PageLayout },
	setup() {
		const { prefixCls } = useDesign('layout-content');
		const { getOpenPageLoading } = useTransitionSetting();
		const { getLayoutContentMode, getPageLoading } = useRootSetting();

		useContentViewHeight();
		return {
			prefixCls,
			getOpenPageLoading,
			getLayoutContentMode,
			getPageLoading,
		};
	},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-layout-content';

.@{prefix-cls} {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;

	&.fixed {
		width: 1200px;
		margin: 0 auto;
	}

	&-loading {
		position: absolute;
		top: 200px;
		z-index: @page-loading-z-index;
	}
}
</style>
